<template>
  <div class="cart">
    <div class="top">
      <ul>
        <li>
          <input type="checkbox" v-model="isAllSelect"> 全选
        </li>
        <li></li>
        <li>商品</li>
        <li>单价</li>
        <li>数量</li>
        <li>小计</li>
        <li>操作</li>
      </ul>
    </div>
    <div class="content">
      <ShopCart v-for="good in goods" :key="good.id" :good="good" @delOneData="delOneData" />
    </div>
    <div class="bottom">
      <div class="left">
        <button class="clear" @click="clearList">清空购物车</button>
        <button class="clear_select" @click="delAllSelect">删除选中</button>
        <button class="list">返回列表页</button>
      </div>

      <div class="right">
        <div class="jiage">
          <p>总价格 :<span>￥</span> <span>{{(totalPrice).toFixed(2)}}</span></p>
          <p class="count">已选购&nbsp;<span>{{totalNum}}</span>&nbsp;件商品</p>
        </div>
        <button class="pay" @click="goOrder">去结算</button>
      </div>

    </div>
  </div>
</template>

<script>
// 引入加入购物车商品的组件
import ShopCart from "@/components/ShopCart.vue"
import { addCart, getCart, delCart, putCart } from "@/assets/request";
export default {
  name: "Cart",
  data() {
    return {
      // 购物车中所有商品
      goods: [],
      // 勾选中的商品id
      selectId: [],
    }
  },
  components: {
    ShopCart,
  },

  computed: {
    // 总购买数量
    totalNum() {
      return this.goods.filter(item => {
        return item.checked = true
      }).reduce((prev, item) => {
        return prev += item.num
      }, 0)
    },
    // 总价格
    totalPrice() {
      return this.goods.filter(item => {
        return item.checked = true
      }).reduce((prev, item) => {
        return prev += item.num * item.s_good.price
      }, 0)
    },
    // 判断已选中商品的数量
    selectTotal() {
      return this.goods.reduce((prev, item) => {
        return prev += item.checked ? 1 : 0
      }, 0)
    },
    // 是否全选
    isAllSelect: {
      // 判断全选按钮 已选的数量=数组的长度
      get() {
        return this.goods.length == this.selectTotal;
      },
      // 当全选按钮有修改时
      set(value) {
        this.goods.forEach((item) => {
          item.checked = value
        })
      },
    },
  },

  methods: {
    async updateCart() {
      let goodRes = await getCart({
        project_id: 255,
      })
      this.goods = goodRes.data.result
      this.goods.forEach((e) => {
        this.$set(e, "checked", false)
      })
    },
    // 去订单页
    goOrder() {
      this.$router.push({
        name: 'order',
      })
      // 勾选中的商品
      let selectGoods = this.goods.filter(item => {
        return item.checked == true
      })
      console.log(selectGoods);
      sessionStorage.setItem("orderList", JSON.stringify(selectGoods))
    },
    // 清空购物车
    async clearList() {
      // 发请求
      this.goods.forEach(item => {
        delCart(item.id)
      })
      let goodRes = await getCart({
        project_id: 255,
      })
      if (confirm("是否确认清空购物车")) this.goods = goodRes.data.result
    },
    // 删除每一项
    // 监听delOneData事件处理函数
    async delOneData() {
      this.updateCart()
      //  console.log(this.goods);
    },
    // 删除已选中
    async delAllSelect() {
      this.goods.forEach(item => {
        if (item.checked == true) this.selectId.push(item.id)
      });
      this.selectId.forEach(item => {
        delCart(item)
      })
      this.updateCart()
    },
  },
  async mounted() {
    let goodRes = await getCart({
      project_id: 255,
    })
    this.goods = goodRes.data.result
    // 在goods每个数据中添加一个属性checked，值为true
    this.goods.forEach((e) => {
      this.$set(e, "checked", false)
    })
    // console.log(this.goods);
  },

}

</script>

<style lang='scss' scoped>
@function vw($w) {
  @return ($w/1349) * 100+vw;
}

.cart {
  width: 100%;
  background-color: #f1eded;

  .top {
    width: 100%;
    height: vw(40);
    margin: 0 auto;
    background-color: #fff;

    ul {
      width: vw(1200);
      margin: 0 auto;
      text-align: center;
      display: flex;
      justify-content: space-between;

      li {
        color: #A4A4A4;
        font-size: vw(16);
        line-height: vw(40);
      }

      li:nth-of-type(1) {
        margin-left: vw(30);

        input {
          cursor: pointer;
        }
      }

      li:nth-of-type(32) {
        width: vw(90);
      }

      li:nth-of-type(3) {
        width: vw(350);
      }

      li:nth-of-type(4) {
        width: vw(90);
      }

      li:nth-of-type(5) {
        width: vw(100);
      }

      li:nth-of-type(6) {
        width: vw(110);
      }

      li:nth-of-type(7) {
        width: vw(90);
        margin-right: vw(60);
      }
    }
  }

  .bottom {
    width: vw(1200);
    height: vw(40);
    padding-bottom: vw(20);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      button{
        width: vw(90);
        height: vw(30);
        border: none;
        &:hover{
          color: red;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
        }
      }
    }

    .right {
      margin-right: vw(20);
      display: flex;
      align-items: center;

      .jiage {
        margin-right: vw(15);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        p:nth-of-type(1) {
          font-size: vw(14);
          text-align: right;

          span:nth-of-type(1) {
            color: red;
            font-size: vw(16);
            font-weight: 500;
          }

          span:nth-of-type(2) {
            color: red;
            font-size: vw(24);
            font-weight: 500;
          }
        }
        p:nth-of-type(2){
          color: rgb(126, 121, 121);
          font-size: vw(12);
          span{
            color: red;
            font-size: vw(13);
          }
        }

      }
      .pay {
        width: vw(150);
        height: vw(45);
        color: #fff;
        font-size: vw(18);
        border: none;
        background-color: rgb(243, 61, 16);
      }
    }
  }
}
</style>
